<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">

<dom-module id="product-container">
    <style>
        :host {
            position: relative;
        }
        paper-ripple {
            color: #ebf4be;
        }
    </style>
    <template>
        <div>
            <div class="fit" style="padding: 10px;">
                <paper-card>
                    <div style="padding: 10px;">
                        <paper-card>
                            <iron-image fade sizing="cover" style="width:340px;height:255px;"
                                        src="{{url}}"></iron-image>
                        </paper-card>
                    </div>
                    <div style="width: 100%;text-align: center;color: #EF6C00;font-size: 14px;font-weight: bold;padding-bottom: 10px;">
                        <label>{{labelText}}</label>
                    </div>
                </paper-card>
            </div>
            <paper-ripple></paper-ripple>
        </div>
    </template>

    <script>
        Polymer({
            is: 'product-container',
            properties: {
                labelText: {
                    type: String,
                    notify: true
                },
                url: {
                    type: String,
                    notify: true
                }
            }
        });
    </script>
</dom-module>